{% extends '_layouts/base.html' %}
{% load static %}

{% block metatags %}
  <meta name="description" content="O objetivo do Cadê meu Bicho é proporcionar o encontro entre os melhores ou futuro melhores amigos. Você pode divulgar cachorros, gatos, ou outros animais que estão desaparecidos ou disponíveis para adoção.">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@kdmeubicho_">

  <meta property="og:title" content="Cadê meu Bicho?">
  <meta property="og:description" content="O objetivo do Cadê meu Bicho é proporcionar o encontro entre os melhores ou futuro melhores amigos. Você pode divulgar cachorros, gatos, ou outros animais que estão desaparecidos ou disponíveis para adoção.">
  <meta property="og:url" content="https://cademeubicho.com">
  <meta property="og:image" content="https://cademeubicho.com{% static 'img/background.jpg' %}">
  <meta property="og:site_name" content="Cadê meu Bicho?">
{% endblock %}

{% block extra_navbar_css %}navbar-fixed-top navbar-home{% endblock %}

{% block heading %}{% endblock %}

{% block page %}
  <div class="banner">
    <div class="container">
      <div class="callout">
        <div class="intro-text">Divulgue</div>
        <div class="intro-text">Encontre</div>
        <div class="intro-text">Adote :)</div>
      </div>
    </div>
  </div>

  <div class="features">
    <div class="container">
      <div class="row">
        <div class="col-md-6 feature">
        <span class="fa-stack fa-5x">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-paw fa-inverse fa-stack-1x"></i>
        </span>

          <h3>Pet desaparecido?</h3>

          <p>Todo mundo sabe que é horrível quando um animalzinho desaparece.</p>

          <p>Queremos ajudar você a encontra-lo, <a href="{% url 'users:create' %}">crie uma conta</a>
            e cadastre uma ou várias fotos e compartilhe nas redes sociais.</p>
        </div>

        <div class="col-md-6 feature">
        <span class="fa-stack fa-5x">
          <i class="fa fa-circle fa-stack-2x c-green"></i>
          <i class="fa fa-life-ring fa-inverse fa-stack-1x"></i>
        </span>

          <h3>Encontrou algum?</h3>

          <p>Você provavelmente acaba de salvar uma vida.</p>

          <p>Use a <a href="{% url 'meupet:search' %}">busca</a> e descubra se
            existe alguém procurando por ele. Você também pode navegar livremente
            entre as <a href="{% url 'meupet:index' %}">categorias</a>.</p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 feature">
        <span class="fa-stack fa-5x">
          <i class="fa fa-circle fa-stack-2x c-red"></i>
          <i class="fa fa-heart fa-inverse fa-stack-1x"></i>
        </span>

          <h3>Vaga no coração?</h3>

          <p>Bicho é tudo de bom.</p>

          <p>Existem animais esperando que alguém os leve pra casa, veja-os
            <a href="{% url 'meupet:index' %}">aqui</a>.</p>
        </div>

        <div class="col-md-6 feature">
        <span class="fa-stack fa-5x">
          <i class="fa fa-circle fa-stack-2x c-blue"></i>
          <i class="fa fa-facebook fa-inverse fa-stack-1x"></i>
        </span>

          <h3>Facebook</h3>

          <p>Curta nossa <a href="https://www.facebook.com/kdmeubicho/">página</a> no Facebook.</p>

          <p>Assim você ficará sabendo quando novos animais forem cadastrados no site.</p>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
